<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content="原型链继承；盗用构造函数继承；组合继承；原型式继承；寄生式继承；寄生式组合继承；ES6 继承">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript 继承方式">
<meta property="og:url" content="https://s4amq.gitee.io/2021/12/16/JavaScript-%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/index.html">
<meta property="og:site_name" content="MQ&#39;s Blog">
<meta property="og:description" content="原型链继承；盗用构造函数继承；组合继承；原型式继承；寄生式继承；寄生式组合继承；ES6 继承">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-12-16T02:26:38.000Z">
<meta property="article:modified_time" content="2021-12-16T08:39:56.405Z">
<meta property="article:author" content="mqchen">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary"><title>JavaScript 继承方式 | MQ's Blog</title><link ref="canonical" href="https://s4amq.gitee.io/2021/12/16/JavaScript-%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":true},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"carbon","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: true,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: {"colWidth":"100%","gapX":"10px"},
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">MQ's Blog</div><div class="header-banner-info__subtitle"></div></div><div class="header-banner-arrow"><div class="header-banner-arrow__icon"><i class="fas fa-angle-down"></i></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">JavaScript 继承方式</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-12-16</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-12-16</span></span></div></header><div class="post-body">
        <h4 id="0-前置知识"   >
          <a href="#0-前置知识" class="heading-link"><i class="fas fa-link"></i></a><a href="#0-前置知识" class="headerlink" title="0. 前置知识"></a>0. 前置知识</h4>
      
        <h5 id="①-构造函数"   >
          <a href="#①-构造函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#①-构造函数" class="headerlink" title="① 构造函数"></a>① 构造函数</h5>
      <p>首字母大写。也是函数，区别在于可以通过 new 的方式执行 – this 指向实例对象</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.a = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> Foo()</span><br></pre></td></tr></table></div></figure>


        <h5 id="②-prototype"   >
          <a href="#②-prototype" class="heading-link"><i class="fas fa-link"></i></a><a href="#②-prototype" class="headerlink" title="② prototype"></a>② prototype</h5>
      <p>所有实例的公共祖先。实例对象上可以拿到原型上的属性、方法</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Foo.prototype = &#123;</span><br><span class="line">  <span class="attr">aa</span>: <span class="number">10</span>,</span><br><span class="line">  <span class="attr">constructor</span>: Foo,</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(foo.aa) <span class="comment">// 10</span></span><br><span class="line"><span class="built_in">console</span>.log(foo)</span><br><span class="line"><span class="comment">// a: 1</span></span><br><span class="line"><span class="comment">// __proto__: &#123; aa: 10, __proto__: ...&#125;</span></span><br></pre></td></tr></table></div></figure>

<ul>
<li>原型的终点是 Object.prototype</li>
<li>不建议使用 <code>foo.__proto__</code> 访问，使用 <code>Foo.prototype</code> (或者 ES6 的 <code>Object.getPrototypeOf(foo)</code>)</li>
</ul>

        <h5 id="③-constructor"   >
          <a href="#③-constructor" class="heading-link"><i class="fas fa-link"></i></a><a href="#③-constructor" class="headerlink" title="③ constructor"></a>③ constructor</h5>
      <p>指向构造函数<br>原型对象自身携带的属性，若重写 prototype 需补充该属性<br><code>Foo.prototype.constructor === Foo</code><br><code>foo.constructor === Foo</code></p>

        <h4 id="1-原型链继承"   >
          <a href="#1-原型链继承" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-原型链继承" class="headerlink" title="1. 原型链继承"></a>1. 原型链继承</h4>
      
        <h5 id="核心理念"   >
          <a href="#核心理念" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>将父类（被继承）的实例作为子类（继承）的原型</p>

        <h5 id="代码"   >
          <a href="#代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 父类</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Parent</span>(<span class="params">job</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.name = <span class="string">&#x27;C&#x27;</span></span><br><span class="line">  <span class="built_in">this</span>.job = job</span><br><span class="line">  <span class="built_in">this</span>.numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line">&#125;</span><br><span class="line">Parent.prototype.sayName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;My name is &#x27;</span> + <span class="built_in">this</span>.name)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 子类</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Son</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.age = <span class="number">12</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 实现继承</span></span><br><span class="line">Son.prototype = <span class="keyword">new</span> Parent()</span><br><span class="line">Son.prototype.sayScore = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">this</span>.score</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> s1 = <span class="keyword">new</span> Son()</span><br><span class="line"><span class="keyword">const</span> s2 = <span class="keyword">new</span> Son()</span><br><span class="line">s1.numbers.push(<span class="number">4</span>)</span><br><span class="line">s1.sayName() <span class="comment">// My name is C</span></span><br><span class="line"><span class="built_in">console</span>.log(s1.name) <span class="comment">// C</span></span><br><span class="line"><span class="built_in">console</span>.log(s1.job) <span class="comment">// undefined 无法传参</span></span><br><span class="line"><span class="built_in">console</span>.log(s1.numbers) <span class="comment">// [1, 2, 3, 4]</span></span><br><span class="line"><span class="built_in">console</span>.log(s2.numbers) <span class="comment">// [1, 2, 3, 4] 引用值共享</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 访问顺序如下 (连接原型链) ★</span></span><br><span class="line"><span class="comment">// s1 -&gt; Son.prototype(new Parent) -&gt; Parent.prototype</span></span><br></pre></td></tr></table></div></figure>


        <h5 id="存在问题"   >
          <a href="#存在问题" class="heading-link"><i class="fas fa-link"></i></a><a href="#存在问题" class="headerlink" title="存在问题"></a>存在问题</h5>
      <ol>
<li>原型中包含的引用值会在所有实例中共享。使得实例属性变成原型属性</li>
<li>子类型在实例化时不能给父类型的构造函数传参</li>
</ol>

        <h4 id="2-盗用构造函数继承"   >
          <a href="#2-盗用构造函数继承" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-盗用构造函数继承" class="headerlink" title="2. 盗用构造函数继承"></a>2. 盗用构造函数继承</h4>
      
        <h5 id="核心理念-1"   >
          <a href="#核心理念-1" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念-1" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>在子类构造函数中调用父类构造函数，并通过 call apply 方法以新创建的对象为上下文执行构造函数</p>

        <h5 id="代码-1"   >
          <a href="#代码-1" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码-1" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Parent</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line">  <span class="built_in">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line">Parent.prototype.sayName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Son</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 实现继承</span></span><br><span class="line">  Parent.call(<span class="built_in">this</span>, <span class="string">&#x27;B&#x27;</span>) <span class="comment">// 可以多个</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> s1 = <span class="keyword">new</span> Son()</span><br><span class="line"><span class="keyword">const</span> s2 = <span class="keyword">new</span> Son()</span><br><span class="line">s1.numbers.push(<span class="number">4</span>)</span><br><span class="line"><span class="built_in">console</span>.log(s1.numbers) <span class="comment">// [1, 2, 3, 4]</span></span><br><span class="line"><span class="built_in">console</span>.log(s2.numbers) <span class="comment">// [1, 2, 3] 引用值不共享</span></span><br><span class="line"><span class="built_in">console</span>.log(s1.name) <span class="comment">// &#x27;B&#x27; 传参</span></span><br><span class="line">s1.sayName() <span class="comment">// 报错 Uncaught TypeError: s1.sayName is not a function</span></span><br></pre></td></tr></table></div></figure>


        <h5 id="存在问题-1"   >
          <a href="#存在问题-1" class="heading-link"><i class="fas fa-link"></i></a><a href="#存在问题-1" class="headerlink" title="存在问题"></a>存在问题</h5>
      <ol>
<li>必须在构造函数中定义方法，因此函数不可用</li>
<li>子类无法访问父类原型上定义的方法，因此所有类型只能使用构造函数模式</li>
</ol>

        <h4 id="3-组合继承-伪经典继承"   >
          <a href="#3-组合继承-伪经典继承" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-组合继承-伪经典继承" class="headerlink" title="3. 组合继承 (伪经典继承)"></a>3. 组合继承 (伪经典继承)</h4>
      
        <h5 id="核心理念-2"   >
          <a href="#核心理念-2" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念-2" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>通过盗用构造函数继承属性；通过原型链继承方法。结合了原型链继承和盗用构造函数继承二者的优点</p>

        <h5 id="代码-2"   >
          <a href="#代码-2" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码-2" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Parent</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line">Parent.prototype.sayName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Son</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 继承属性</span></span><br><span class="line">  Parent.call(<span class="built_in">this</span>, name)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 继承方法</span></span><br><span class="line">Son.prototype = <span class="keyword">new</span> Parent()</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> s1 = <span class="keyword">new</span> Son(<span class="string">&#x27;A&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(s1.name) <span class="comment">// A</span></span><br><span class="line">s1.sayName() <span class="comment">// A</span></span><br></pre></td></tr></table></div></figure>


        <h5 id="存在问题-2"   >
          <a href="#存在问题-2" class="heading-link"><i class="fas fa-link"></i></a><a href="#存在问题-2" class="headerlink" title="存在问题"></a>存在问题</h5>
      <ol>
<li>两次调用父类构造函数，消耗内存较多</li>
<li>子类构造函数会代替原型上的父类构造函数</li>
</ol>

        <h4 id="4-原型式继承"   >
          <a href="#4-原型式继承" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-原型式继承" class="headerlink" title="4. 原型式继承"></a>4. 原型式继承</h4>
      
        <h5 id="核心理念-3"   >
          <a href="#核心理念-3" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念-3" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>复制一个对象并通过函数包装</p>

        <h5 id="代码-3"   >
          <a href="#代码-3" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码-3" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">objext</span>(<span class="params">o</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = o</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ECMAScript5 新增 Object.create() 方法，将原型式继承规范化</span></span><br><span class="line"><span class="keyword">const</span> another = <span class="built_in">Object</span>.create(person)</span><br></pre></td></tr></table></div></figure>


        <h5 id="存在问题-3"   >
          <a href="#存在问题-3" class="heading-link"><i class="fas fa-link"></i></a><a href="#存在问题-3" class="headerlink" title="存在问题"></a>存在问题</h5>
      <ol>
<li>属性中的引用值会在相关对象间共享</li>
<li>适用于不需要单独创建构造函数，但仍然需要在对象间共享信息的场合</li>
</ol>

        <h4 id="5-寄生式继承"   >
          <a href="#5-寄生式继承" class="heading-link"><i class="fas fa-link"></i></a><a href="#5-寄生式继承" class="headerlink" title="5. 寄生式继承"></a>5. 寄生式继承</h4>
      
        <h5 id="核心理念-4"   >
          <a href="#核心理念-4" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念-4" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>给原型式继承外添加一层函数用以接收参数</p>

        <h5 id="代码-4"   >
          <a href="#代码-4" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码-4" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">object</span>(<span class="params">o</span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  F.prototype = o</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> F()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createNew</span>(<span class="params">origin</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> clone = object(origin)</span><br><span class="line">  clone.sayHi = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;Hi&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> clone</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h5 id="存在问题-4"   >
          <a href="#存在问题-4" class="heading-link"><i class="fas fa-link"></i></a><a href="#存在问题-4" class="headerlink" title="存在问题"></a>存在问题</h5>
      <ol>
<li>无法复用</li>
<li>适用于主要关注对象，不在乎类型和构造函数的场景</li>
</ol>

        <h4 id="6-寄生式组合继承-经典继承-star"   >
          <a href="#6-寄生式组合继承-经典继承-star" class="heading-link"><i class="fas fa-link"></i></a><a href="#6-寄生式组合继承-经典继承-star" class="headerlink" title="6. 寄生式组合继承 (经典继承) :star:"></a>6. 寄生式组合继承 (经典继承) :star:</h4>
      
        <h5 id="核心理念-5"   >
          <a href="#核心理念-5" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念-5" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>通过组合修复以上方法的问题</p>

        <h5 id="代码-5"   >
          <a href="#代码-5" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码-5" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Parent</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line">Parent.prototype.sayName = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Son</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 继承属性</span></span><br><span class="line">  Parent.call(<span class="built_in">this</span>, name)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 继承方法</span></span><br><span class="line"><span class="keyword">if</span> (!<span class="built_in">Object</span>.create) &#123;</span><br><span class="line">  <span class="built_in">Object</span>.create = <span class="function"><span class="keyword">function</span> (<span class="params">proto</span>) </span>&#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">    F.prototype = proto</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">Son.prototype = <span class="built_in">Object</span>.create(Super.prototype)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> s1 = <span class="keyword">new</span> Son(<span class="string">&#x27;A&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(s1.name) <span class="comment">// A</span></span><br><span class="line">s1.sayName() <span class="comment">// A</span></span><br></pre></td></tr></table></div></figure>


        <h4 id="7-ES6-继承"   >
          <a href="#7-ES6-继承" class="heading-link"><i class="fas fa-link"></i></a><a href="#7-ES6-继承" class="headerlink" title="7. ES6 继承"></a>7. ES6 继承</h4>
      
        <h5 id="核心理念-6"   >
          <a href="#核心理念-6" class="heading-link"><i class="fas fa-link"></i></a><a href="#核心理念-6" class="headerlink" title="核心理念"></a>核心理念</h5>
      <p>运用 ES6 Class ，简化代码</p>

        <h5 id="代码-6"   >
          <a href="#代码-6" class="heading-link"><i class="fas fa-link"></i></a><a href="#代码-6" class="headerlink" title="代码"></a>代码</h5>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Parent</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name = <span class="string">&#x27;a&#x27;</span></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>`</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Son</span> <span class="keyword">extends</span> <span class="title">Parent</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name = <span class="string">&#x27;b&#x27;</span></span>)</span> &#123;</span><br><span class="line">    <span class="comment">// 继承父类属性</span></span><br><span class="line">    <span class="built_in">super</span>(name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">eat</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="comment">// 继承父类方法</span></span><br><span class="line">    <span class="built_in">super</span>.say()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束，感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://s4amq.gitee.io">mqchen</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="https://s4amq.gitee.io/2021/12/16/JavaScript-%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/">https://s4amq.gitee.io/2021/12/16/JavaScript-%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://s4amq.gitee.io/tags/JavaScript/">JavaScript</a></span></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/2021/12/17/ES6-Class/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">ES6 Class</span></a></div><div class="paginator-next"><a class="paginator-next__link" href="/2021/12/15/Vue-%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BC%A0-npm-%E6%B5%81%E7%A8%8B/"><span class="paginator-prev__text">Vue 组件上传 npm 流程</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#0-%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86"><span class="toc-number">1.</span> <span class="toc-text">
          0. 前置知识</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E2%91%A0-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.</span> <span class="toc-text">
          ① 构造函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E2%91%A1-prototype"><span class="toc-number">1.2.</span> <span class="toc-text">
          ② prototype</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E2%91%A2-constructor"><span class="toc-number">1.3.</span> <span class="toc-text">
          ③ constructor</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%8E%9F%E5%9E%8B%E9%93%BE%E7%BB%A7%E6%89%BF"><span class="toc-number">2.</span> <span class="toc-text">
          1. 原型链继承</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5"><span class="toc-number">2.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81"><span class="toc-number">2.2.</span> <span class="toc-text">
          代码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%98%E5%9C%A8%E9%97%AE%E9%A2%98"><span class="toc-number">2.3.</span> <span class="toc-text">
          存在问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E7%9B%97%E7%94%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%BB%A7%E6%89%BF"><span class="toc-number">3.</span> <span class="toc-text">
          2. 盗用构造函数继承</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5-1"><span class="toc-number">3.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-1"><span class="toc-number">3.2.</span> <span class="toc-text">
          代码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%98%E5%9C%A8%E9%97%AE%E9%A2%98-1"><span class="toc-number">3.3.</span> <span class="toc-text">
          存在问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF-%E4%BC%AA%E7%BB%8F%E5%85%B8%E7%BB%A7%E6%89%BF"><span class="toc-number">4.</span> <span class="toc-text">
          3. 组合继承 (伪经典继承)</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5-2"><span class="toc-number">4.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-2"><span class="toc-number">4.2.</span> <span class="toc-text">
          代码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%98%E5%9C%A8%E9%97%AE%E9%A2%98-2"><span class="toc-number">4.3.</span> <span class="toc-text">
          存在问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E5%8E%9F%E5%9E%8B%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="toc-number">5.</span> <span class="toc-text">
          4. 原型式继承</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5-3"><span class="toc-number">5.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-3"><span class="toc-number">5.2.</span> <span class="toc-text">
          代码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%98%E5%9C%A8%E9%97%AE%E9%A2%98-3"><span class="toc-number">5.3.</span> <span class="toc-text">
          存在问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E5%AF%84%E7%94%9F%E5%BC%8F%E7%BB%A7%E6%89%BF"><span class="toc-number">6.</span> <span class="toc-text">
          5. 寄生式继承</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5-4"><span class="toc-number">6.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-4"><span class="toc-number">6.2.</span> <span class="toc-text">
          代码</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AD%98%E5%9C%A8%E9%97%AE%E9%A2%98-4"><span class="toc-number">6.3.</span> <span class="toc-text">
          存在问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E5%AF%84%E7%94%9F%E5%BC%8F%E7%BB%84%E5%90%88%E7%BB%A7%E6%89%BF-%E7%BB%8F%E5%85%B8%E7%BB%A7%E6%89%BF-star"><span class="toc-number">7.</span> <span class="toc-text">
          6. 寄生式组合继承 (经典继承) :star:</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5-5"><span class="toc-number">7.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-5"><span class="toc-number">7.2.</span> <span class="toc-text">
          代码</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-ES6-%E7%BB%A7%E6%89%BF"><span class="toc-number">8.</span> <span class="toc-text">
          7. ES6 继承</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E7%90%86%E5%BF%B5-6"><span class="toc-number">8.1.</span> <span class="toc-text">
          核心理念</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81-6"><span class="toc-number">8.2.</span> <span class="toc-text">
          代码</span></a></li></ol></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/02.gif" alt="avatar"></div><p class="sidebar-ov-author__text">mqchen</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="https://blog.csdn.net/PorkCanteen" target="_blank" rel="noopener" data-popover="CSDN" data-popover-pos="up"><span class="sidebar-ov-social-item__icon">C</span></a><a class="sidebar-ov-social-item" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=2385190394@qq.com/" target="_blank" rel="noopener" data-popover="social.发送邮件" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="far fa-envelope"></i></span></a></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">14</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">7</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">6</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-pizza-slice"></i></span><span>mqchen</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>